<template>
    <view class="my-add-path">
		<form>
        <view class="path-item">
            <view class="">收件人：</view>
            <input type="text" value="" placeholder="收件人姓名" v-model="person"/>
        </view>
        <view class="path-item">
            <view class="">手机号：</view>
            <input type="text" value="" placeholder="11位手机号" v-model="phone"/>
        </view>
		
		<view class="path-item">
			<view class="feedback-title" >选择国籍：</view>
			<picker v-for="(item,index) in nationList" mode="selector" :range="item.content" @change="pickerNationChange" @click="pickerIndex = index">
				<view class="picker">{{item.text}}</view>
			</picker>
		</view>
		
		<view class="path-item">
			<view class="feedback-title" >选择省份：</view>
			<picker v-for="(item,index) in provinceList" mode="selector" :range="item.content" @change="pickerProvinceChange" @click="pickerIndex = index">
				<view class="picker">{{item.text}}</view>
			</picker>
		</view>
		
		<view class="path-item">
			<view class="feedback-title" >选择城市：</view>
			<picker v-for="(item,index) in cityList" mode="selector" :range="item.content" @change="pickerCityChange" @click="pickerIndex = index">
				<view class="picker">{{item.text}}</view>
			</picker>
		</view>
		
		<view class="path-item">
			<view class="feedback-title" >选择县/区：</view>
			<picker v-for="(item,index) in areaList" mode="selector" :range="item.content" @change="pickerAreaChange" @click="pickerIndex = index">
				<view class="picker">{{item.text}}</view>
			</picker>
		</view>
		
        <view class="path-item">
            <view class="">详细地址：</view>
            <input type="text" value="" placeholder="5到60个字符" v-model="detailedAddress"/>
        </view>
        <view class="path-item">
            <view class="">设为默认地址：</view>
			<radio-group @change="chan" class="radio">
				<label>
					<radio :value="'0'"  checked="checked" />默认
					<radio :value="'1'"  />非默认
				</label>
			</radio-group>
        </view>
		
		<button calss="feedback-button" @click="saveAddress()">保  存</button>
		
		</form>
		
		<view class="bottom_foot"></view>
		<commonUserTabBar :currentTab="currentTab"></commonUserTabBar>
    </view>
</template>

<script>
import global from '@/global.js'

export default {
	data() {
		return {
			//当前选项卡
			currentTab:'/pages/myMain/addAddress',
			nationList:[],
			provinceList:[],
			cityList:[],
			areaList:[],
			person:'',
			phone:'',
			detailedAddress:'',
			hasDefault:false,
			
			nationItem:'',
			provinceItem:'',
			cityItem:'',
			areaItem:'',
			// 定义当前点击获取的下标，数组是从【0】开始的；
			pickerIndex:0
		};
	},
	components:{
	
	},
	// 页面生命周期
	onNavigationBarButtonTap() {
		this.createPathFn( this.pathObj ); //提交数据对象到state.list
		// 后退一页
		uni.navigateBack({
			delta:1
		})
	},
	methods:{
		pickerNationChange:function(e){
			this.nationList[this.pickerIndex].text = this.nationList[this.pickerIndex].content[e.detail.value];
			this.nationItem = this.nationList[this.pickerIndex].content[e.detail.value]
			
			console.log("choose name data value :  " , this.nationList[this.pickerIndex].content[e.detail.value])
		    this.proData(2,this.nationList[this.pickerIndex].content[e.detail.value])
		},
		pickerProvinceChange:function(e){
			this.provinceList[this.pickerIndex].text = this.provinceList[this.pickerIndex].content[e.detail.value];
			this.provinceItem = this.provinceList[this.pickerIndex].content[e.detail.value]
			
			console.log("choose name data value :  " , this.provinceList[this.pickerIndex].content[e.detail.value])
		    this.cityData(3,this.provinceList[this.pickerIndex].content[e.detail.value])
		},
		pickerCityChange:function(e){
			this.cityList[this.pickerIndex].text = this.cityList[this.pickerIndex].content[e.detail.value];
			this.cityItem= this.cityList[this.pickerIndex].content[e.detail.value]
			
			console.log("choose name data value :  " , this.cityList[this.pickerIndex].content[e.detail.value])
		    this.areaData(4,this.cityList[this.pickerIndex].content[e.detail.value])
		},
		pickerAreaChange:function(e){
			this.areaList[this.pickerIndex].text = this.areaList[this.pickerIndex].content[e.detail.value];
			this.areaItem = this.areaList[this.pickerIndex].content[e.detail.value]
			
			console.log("choose name data value :  " , this.areaList[this.pickerIndex].content[e.detail.value])
		    //this.proData(4,this.areaList[this.pickerIndex].content[e.detail.value])
		},
		chan(e) {
			this.activeRadio = e.detail.value;
            this.hasDefault= false;
			//this.activeRadio存的是选中的Value的值
			console.log("activeRadio  value  data :   " , this.activeRadio);
			if(this.activeRadio==0){
				this.hasDefault=true
			}
			
			console.log("hasDefault  value  data :   " , this.hasDefault);
		},
	    natData() {
			uni.request({
				url: global.baseUrl + 'api/base/nation', // 接口地址
				method: 'get',
				dataType: "json",
				header: {
					'content-type': 'application/x-www-form-urlencoded', //自定义请求头信息
				},
				success: (request) => {
						console.log("request natData data result : ", request.data.data)
					if (request.data.code == 0) {
							this.nationList = request.data.data
					} else {
						console.log("request result error: ", request.data.code)
					}
				},
				fail: (error) => {
					console.log(error)
				}
			})
		},
		proData(val,pcode) {
			console.log("reuqest pcode  data  :  ", pcode)
			uni.request({
				url: global.baseUrl + 'api/base/province', // 接口地址
				method: 'get',
				dataType: "json",
				data:{
					name: pcode
				},
				header: {
					'content-type': 'application/x-www-form-urlencoded', //自定义请求头信息
				},
				success: (request) => {
						console.log("request proData result : ", request)
					if (request.data.code == 0) {
							this.provinceList = request.data.data
					} else {
						console.log("request result error: ", request.data.code)
					}
				},
				fail: (error) => {
					console.log(error)
				}
			})
		},
		cityData(val,ccode) {
			console.log("reuqest ccode  data  :  ", ccode)
			uni.request({
				url: global.baseUrl + 'api/base/city', // 接口地址
				method: 'get',
				dataType: "json",
				data:{
					name: ccode
				},
				header: {
					'content-type': 'application/x-www-form-urlencoded', //自定义请求头信息
				},
				success: (request) => {
						console.log("request cityData result : ", request.data)
					if (request.data.code == 0) {
							this.cityList = request.data.data
					} else {
						console.log("request result error: ", request.data.code)
					}
				},
				fail: (error) => {
					console.log(error)
				}
			})
		},
		areaData(val,acode) {
			console.log("reuqest acode  data  :  ", acode)
			uni.request({
				url: global.baseUrl + 'api/base/area', // 接口地址
				method: 'get',
				dataType: "json",
				data:{
					name: acode
				},
				header: {
					'content-type': 'application/x-www-form-urlencoded', //自定义请求头信息
				},
				success: (request) => {
						console.log("request result : ", request.data.code)
					if (request.data.code == 0) {
							this.areaList = request.data.data
					} else {
						console.log("request result error: ", request.data.code)
					}
				},
				fail: (error) => {
					console.log(error)
				}
			})
		},
		saveAddress(){
			//这里请求后台获取短信验证码
			var token = uni.getStorageSync("token")
			console.log("that phone  value :  " ,  this.phone)
			uni.request({
				url: global.baseUrl + 'api/address/save',
				method:'POST',
				data: {
					person: this.person,
					phone: this.phone,
					userNation:this.nationItem,
					userProvince:this.provinceItem,
					userCity:this.cityItem,
					userCounty:this.areaItem,
					hasDefault: this.hasDefault,
					detailedAddress: this.detailedAddress
				},
				header: {
					'X-Token': token
				},
				success: function(res) {
					console.log("save address request data result :  ", res)
					if(res.data.data){
						uni.reLaunch({url: '/pages/myMain/myAddressList'});
					}
				},
				fail: (error) => {
				  console.log(error)
				}
			});
		}
	},
	onLoad() {
		this.natData()
	}
}
</script>

<style lang="scss">
.my-add-path{
	padding-top: 2px;
    padding-left: 20rpx;
	padding-right: 20rpx;
}
.path-item{
    display: flex;
	margin-top: 3px;
	background-color: #F8F8F8;
    justify-content: space-between;
    align-items: center;
    padding: 16rpx 0;
    width: 100%;
	height:80rpx;
    border-bottom: 2rpx solid #ccc ;
}
.path-item input{
    flex: 1;
    text-align: left;
    padding: 0 10rpx;
}

.path-item picker{
    flex: 1;
    text-align: center;
    padding: 0 10rpx;
}


 .selectType{
	 width: 90%;
	 height: 35px;
 }
 
 .feedback-content {
   margin: 15px;
   padding: 10px;
   margin-right: 2px;
   width:60%;
   font-size: 36px;
   .feedback-textarea {
     font-size: 36px;
     width: 100%;
     height: 120px;
   }
 }
 
 .radio{
	 margin-right: 30px;
 }
 
.feedback-button {
   text-align: center;
   padding-top: 3px;
   font-size: 36rpx;
   height: 40px;
   background-color: #E0E0E0;
}

.bottom_foot{
	height: 10rpx;
	margin-top: 300rpx;
}
</style>

